<template>
  <!-- html 结构 -->
  <div class="preson">
    <!-- <h2>测试：{{ a }} 人员列表：{{ renmen }}</h2> -->
    <hr />
    <ul>
      <!-- 遍历 v-for -->
      <li v-for="p in renmen" :key="p.id">
        姓名：{{ p.name }} | 年龄：{{ p.age }} | 女朋友：{{ p.grilFriend }}
      </li>
    </ul>
  </div>
</template>

<!-- 在vue3中监事一个reactive定义的响应式常量应该是这么写的 -->
<script lang="ts" name="Person" setup>
import { defineProps, withDefaults } from "vue";
import { type Persons } from "@/types";

// 接收a
// defineProps(["a"]);

// defineProps的返回值
// let x = defineProps(["a", "b", "renmen"]);
// console.log(x);

// 接收renmen + 限制类型
// let x = defineProps<{ renmen: Persons }>();

// 接收 + 类型限制 + 必要性 + 默认值
withDefaults(defineProps<{ renmen?: Persons }>(), {
  renmen: () => [{ id: "id", name: "默认名称", age: 0 }],
});
</script>

<!-- scoped局部样式: -->
<style scoped>
.preson {
  background-color: rgb(120, 145, 46);
  box-shadow: 0 0 10px;
  border-radius: 10px;
}
/* 样式 */
button {
  background-color: aqua;
  margin: 5px;
}
</style>
